<style lang="scss" scoped>
  .rank_more_wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    color: #FFFFFF;
    font-size: 16px;
    .more_btns {
      font-size: 12px;
      display: flex;
      align-items: center;
      color: #FFFFFF;
      position: absolute;
      right: 16px;
      cursor: pointer;
      img {
        width: 12px;
        height: 12px;
        margin-left:2px;
      }
    }
  }
</style>

<template>
  <div :style="moreStrle" class="rank_more_wrap">
    {{ title }}
    <div class="more_btns" @click="lookMore" v-if="showMore">
      查看更多
      <img src="@/assets/layout/right.png" alt="">
    </div>
  </div>
</template>

<script setup>
  import { computed } from 'vue'
  const props = defineProps({
    color: {
      type: String,
      default: '#0f89ab'
    },
    title: {
      type: String,
      default: '投手当日消耗排名'
    },
    showMore: {
      type: Boolean,
      default: true
    }
  })
  const moreStrle = computed(() => {
    return { background: props.color }
  })
  const emits = defineEmits('look-more')

  const lookMore = () => emits('look-more')
</script>